// src\components\Search\index.jsx
import React, { Component } from 'react'
import axios from 'axios'
import PubSub from 'pubsub-js'
export default class Search extends Component {

    getSearchByName = () => {
        // console.log(this.keyWordElement);
        // 解构出value并重命名为keyWord
        const { value: keyWord } = this.keyWordElement;
        PubSub.publish('mySearch', { isLoading: true });
        axios.get(`/githubSearch-api/search/users?q=${keyWord}`).then(
            response => {
                console.log("successful！！！", response.data.items);
                PubSub.publish('mySearch', { userList: response.data.items, isFirst: false, isLoading: false });
            },
            error => {
                console.log("Error!!!", error);
                PubSub.publish('mySearch', { err: error.message, isFirst: false });
            }
        )
    }
    render() {
        return (
            <div>
                <section className="jumbotron">
                    <h3 className="jumbotron-heading">搜索Github用户</h3>
                    <div>
                        <input type="text" ref={(currentNode) => this.keyWordElement = currentNode} placeholder="请输入用户名搜索" />&nbsp;
                        <button onClick={this.getSearchByName}>搜索</button>
                    </div>
                </section>
            </div>
        )
    }
}
